<template>
  <!--优惠券-->
  <div>
    <md-popup v-model="value" position="bottom" :has-mask="true" prevent-scroll>
      <md-popup-title-bar title="优惠券" cancel-text="关闭" @cancel="hidePopUp()"></md-popup-title-bar>
      <div id="coupon_box" :style="Height">
        <p class="coupon_no" @click="couponBtn_no()">
          不使用任何优惠券
          <span :class="{active:coupon_type=='coupon_no'}"></span>
        </p>
        <div v-if="isShow">
          <div class="conpon_list" v-for="(item,index) in conponData" :key="index" @click="couponBtn(item)">
            <div class="conpon_list_left">
              <p class="conponMoney" v-if="item.money_type=='1'">
                <span>{{item.money}}</span>元
              </p>
              <p class="conponMoney" v-else>
                <span>{{item.money}}</span>折
              </p>
              <p class="conponMoneyText">{{item.use_limit}}</p>
            </div>
            <div class="conpon_list_right">
              <p class="conponText">{{item.coupon_title}}</p>
              <p class="conponName">{{item.use_scope}}</p>
              <p class="conponTime">{{timestampToTime(item.useful_time_begin)}}-{{timestampToTime(item.useful_time_end)}}</p>
              <span :class="{active:coupon_type==item.user_coupon_id}"></span>
            </div>
            <div style="clear:both"></div>
            <div class="conpon_list_bottom">
              <p>{{item.remark}}</p>
            </div>
          </div>
        </div>
        <div v-else>
          <p class="conponNo">
            <img src="@/assets/imgs/yhq_kb.png" />
          </p>
          <p class="conpon_number">没有更多可用优惠券了</p>
        </div>
      </div>
    </md-popup>
  </div>
</template>
<script>
import '@/assets/svgs/yhq_next.svg';
import { Popup, PopupTitleBar, Picker, Icon, Dialog } from 'mand-mobile';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import { mapGetters, mapActions, mapMutations } from 'vuex';
import Loading from '@/components/loading';
import http from '@/common/http';
var moment = require('moment');
moment.locale('zh-cn');
export default {
  name: 'rules-selector',
  components: {
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    [Icon.name]: Icon,
    [Picker.name]: Picker
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    appendTo: {
      default: () => document.body
    }
  },
  data() {
    return {
      Height: {
        height: ''
      },
      isShow: true,
      conponData: [],
      coupon_type: ''
    };
  },
  created() {
    let params = {
      orderNo: this.getIncityOrderDate.orderNo
    };
    Loading.show();
    http.post('/pakj/city/getOrderCoupon', params).then(res => {
      console.log(res.data);
      Loading.hide();
      if (res.data.code === '000000') {
        if (res.data.data.length === 0) {
          this.isShow = false;
        }
        this.conponData = res.data.data;
        if (this.getIncityOrderDate.couponType === '2') {
          this.coupon_type = 'coupon_no';
        } else {
          this.coupon_type = this.getIncityOrderDate.couponId;
        }
        console.log(res.data);
      } else {
        Dialog.alert({
          title: '提示',
          content: res.data.msg,
          confirmText: '确定'
        });
      }
    });
  },
  methods: {
    getheight() {
      this.Height.height = this.$refs.driveridentitybox.clientHeight + 'px';
    },
    hidePopUp() {
      this.value = false;
    },
    // 使用优惠券
    couponBtn(item) {
      this.coupon_type = item.user_coupon_id;
      this.chooseCoupon(item);
    },
    // 不使用优惠券
    couponBtn_no() {
      this.coupon_type = 'coupon_no';
      this.chooseCoupon();
    },
    chooseCoupon(item) {
      var params = null;
      if (item) {
        params = {
          orderNo: this.getIncityOrderDate.orderNo,
          userCouponId: item.user_coupon_id
        };
      } else {
        params = {
          orderNo: this.getIncityOrderDate.orderNo,
          userCouponId: ''
        };
      }
      Loading.show();
      http.post('/pakj/city/chooseCoupon', params).then(res => {
        Loading.hide();
        console.log(res.data);
        if (res.data.code === '000000') {
          this.getIncityCarInfo(item);
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    getIncityCarInfo(item) {
      var params = {
        orderNo: this.getIncityOrderDate.orderNo
      };
      this.$store.dispatch('getIncityOrderInfo', params).then(() => {
        console.log(this.getIncityOrderDate);
        this.$emit('submit', item);
        this.value = false;
      });
    },
    timestampToTime(timestamp) {
      var date = new Date(timestamp);
      var Y = date.getFullYear() + '-';
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      var D = date.getDate() + ' ';
      return Y + M + D;
    }
  },
  mounted() {
    if (this.appendTo) {
      this.appendTo.appendChild(this.$el);
    }
  },
  beforeDestroy() {
    if (this.appendTo) {
      this.appendTo.removeChild(this.$el);
    }
  },
  computed: {
    ...mapGetters(['getIncityOrderDate'])
  }
};
</script>
<style lang="stylus">
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

#coupon_box {
  height: 100vh;
  background-color: color-primary-background;
}

.exchangetext {
  color: #666;
  font-size: 28px;
}

.conpon_list {
  margin: 20px 30px 0px 30px;
  background-color: #fff;
  border-top: 6px #FF6917 solid;
  border-radius: 7px;
  position: relative;
}

.conpon_list_left {
  float: left;
  margin-left: 30px;
  margin-top: 30px;
}

.conpon_list_right {
  float: left;
  margin-top: 24px;
  margin-left: 60px;
}

.conpon_list_right span {
  display: inline-block;
  background-color: #fff;
  width: 36px;
  height: 36px;
  border: 1px solid #e3e3e3;
  border-radius: 50%;
  position: absolute;
  top: 80px;
  right: 30px;
}

.conpon_list_right span.active {
  background: url('../../../assets/imgs/ddzf_icon_pre@2x.png') no-repeat center center;
  background-size: contain;
  border-color: #fff;
  width: 36px;
  height: 36px;
}

.conpon_list_bottom {
  margin-top: 26px;
  margin-left: 18px;
  margin-right: 18px;
  font-size: 22px;
  color: #999;
  padding-bottom: 20px;
}

.conponMoney {
  color: #FF6917;
  font-size: 28px;
}

.conponMoney span {
  font-size: 64px;
}

.conponMoneyText {
  font-size: 24px;
  color: #666;
}

.conponText {
  font-size: 32px;
  color: #ff6917;
}

.conponName {
  font-size: 26px;
  color: #333;
  margin-top: 10px;
}

.conponTime {
  font-size: 24px;
  color: #999;
  margin-top: 12px;
}

.conpon_number {
  margin-top: 34px;
  color: #999;
  font-size: 24px;
  text-align: center;
}

.conpon_number span {
  margin-left: 10px;
  border-left: solid 1px #ccc;
  padding-left: 10px;
}

.conponBtn {
  margin: 80px 96px 0px 96px;
  height: 98px;
  line-height: 98px;
  color: #666;
  font-size: 32px;
  text-align: center;
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
  border: 2px solid #ccc;
}

.conponmore {
  margin: 80px 96px 0px 96px;
  height: 98px;
  line-height: 98px;
  color: #fff;
  font-size: 32px;
  text-align: center;
  background-color: #ff6917;
  border-radius: 10px;
}

.conponNo {
  margin-top: 150px;
  text-align: center;
}

.conponNo img {
  width: 50%;
}

.yhq_next {
  position: relative;
  left: 8px;
  top: 1px;
  width: 18px;
  height: 20px;
}

.coupon_no {
  height: 80px;
  line-height: 80px;
  font-size: 28px;
  color: #333;
  padding: 0px 30px;
  background-color: #fff;
  padding-top: 20px;
}

.coupon_no span {
  display: inline-block;
  background-color: #fff;
  width: 36px;
  height: 36px;
  border: 1px solid #e3e3e3;
  border-radius: 50%;
  position: relative;
  top: 20px;
  float: right;
}

.coupon_no span.active {
  background: url('../../../assets/imgs/ddzf_icon_pre@2x.png') no-repeat center center;
  background-size: contain;
  border-color: #fff;
  width: 36px;
  height: 36px;
}
</style>
